<template>
    <div v-if="modalShow">
        <Modal v-model="modal" class="modal-full" title="模板编辑" width=900>
            <div class="template-from">
                <div class="modal-spin" v-if="!dataIsLoad">
                    <div>
                        <Spin size="large" fix></Spin>
                    </div>
                </div>
                <div class="block-panel item-form" v-else>
                    <Row>
                        <Col :span="2">
                        <label>编码</label>
                        </Col>
                        <Col :span="10">
                        <Input :value="data.code" @input="updateData({code:'code',value:$event})" placeholder="编码"></Input>
                        </Col>
                        <Col :span="2">
                        <label>名称</label>
                        </Col>
                        <Col :span="10">
                        <Input :value="data.name" @input="updateData({code:'name',value:$event})" placeholder="名称"></Input>
                        </Col>
                        <Col :span="2">
                        <label>数据源</label>
                        </Col>
                        <Col :span="10">
                        <Select-control :value="data.ds_id" :data="dsData" disabled placeholder="请选择数据源"></Select-control>
                        </Col>
                        <Col :span="2">
                        <label>自动建表</label>
                        </Col>
                        <Col :span="10">
                        <Checkbox :disabled="true" :value="data.enable_create"></Checkbox>
                        </Col>
                        <Col :span="2">
                        <label>备注</label>
                        </Col>
                        <Col :span="22">
                        <Input :value="data.memo" @input="updateData({code:'memo',value:$event})" placeholder="备注" type="textarea" :rows="4"></Input>
                        </Col>
                    </Row>
                </div>
                <step-mapping v-if="dataIsLoad" :active="true" class="block-panel"></step-mapping>
                <step-process v-if="dataIsLoad" :active="true" class="block-panel"></step-process>
            </div>
            <div slot="footer" class="button-panel-button">
                <i-button @click="close">取消</i-button>
                <i-button @click="submit" type="primary">保存</i-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import ModalBase from '../modalBase'
import SelectControl from '@/element/select'

import StepMapping from '../importTemplate/steps/stepMapping'
import StepProcess from '../importTemplate/steps/stepProcess'
import moduleStore from '../importTemplate/store'
export default {
    extends: ModalBase,
    moduleStore,
    props: {
        paramId: {}
    },
    data() {
        return {
            dataIsLoad: false
        }
    },
    watch: {
    },
    created() {
    },
    methods: {
        load() {
            this.dataIsLoad = false
            this.setMappingLoad(false)
            Promise.all([this.findData(this.$parent.actionData), this.fetchDs()]).then(() => {
                this.createSheetData()
                this.initMappingData()
                return this.fetchEntity()
            }).then(() => {
                //需再查询
                if (!this.data.enable_create) {
                    return this.createMappingData()
                } else {
                    return new Promise((resolve) => {
                        this.createSheetEntityMapping()
                        resolve()
                    })
                }
            }).then(() => {
                this.dataIsLoad = true
                //this.$forceUpdate()
                //this.setMappingLoad(true)
            })
        },
        submit() {
            this.getSubmitData().then((data) => {
                this.$parent.actionSubmit(data)
            })
        }
    },
    components: {
        StepMapping,
        StepProcess,
        SelectControl
    }
}
</script>

<style lang="less">
.block-panel {
    margin-bottom: 10px;
    margin-top: 10px;
}

.CodeMirror {
    height: 96px;
}

.template-from {
    h4 {
        font-size: 14px;
        padding-bottom: 16px;
    }
    .ivu-select-dropdown {
        top: 42px !important;
    }
    .block-panel {
        overflow: hidden;
        .ivu-tabs {
            margin-left: 0px;
        }
    }

    .item-form {
        .ivu-row {
            margin-right: 8px;
        }

        .ivu-col>label {
            line-height: 32px;
            text-align: right;
            display: block;
            margin: 8px;
            margin-left: -12px;
            &.ivu-checkbox-wrapper {
                text-align: left;
                margin-left: 12px;
            }
        }
        .ivu-input-type {
            margin: 8px;
        }
        .ivu-col>div {
            margin: 8px;
        }
    }
}
</style>
